<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Energy a Industrial Category Flat Bootstarp Responsive Website Template | Projects :: w3layouts</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link rel="stylesheet" href="css/touchTouch.css" type="text/css" media="all" />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Energy Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Montserrat|Raleway:400,200,300,500,600,700,800,900,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<script src="js/touchTouch.jquery.js"></script> 
<script src="js/jquery.ui.totop.js"></script>
   <!--/animated-css-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
				});
			});
</script>
<!--script-->
<script>        
        $(function(){
  
  // Initialize the gallery
  $('.works a.gal').touchTouch();
 });  
</script>
</head>
<body>
<!-- banner -->
<div class="banner banner2">
	 <div class="container">
		 <div class="header">
				<div class="col-md-4 head-logo">
				 	<h1><a href="index.html"><img src="images/engry.png" alt=""/>ENERGY</a></h1>
				</div>
				<div class="col-md-4 search">					
				    <form>
					<input type="text" value="" placeholder="Search...">
					<input type="submit" value="">
					</form>					
				</div>
				<div class="col-md-4 social">
				   <ul>
						<li><a href="#"><i class="facebook"></i></a></li>
						<li><a href="#"><i class="twitter"></i></a></li>
						<li><a href="#"><i class="dribble"></i></a></li>	
						<li><a href="#"><i class="google"></i></a></li>										
				  </ul>
				</div>
				<div class="clearfix"> </div>
		 </div>
		 <div class="top-menu">
			 <span class="menu"><img src="images/nav-icon.png"></span>
			 <ul>
					 <li><a href="index.html">Home</a></li>
					 <li><a href="index.html">About</a></li>	
					 <li><a href="index.html">Service</a></li>
					 <li class="active"><a href="projects.html">Projects</a></li>					 
					 <li><a href="news.html">News & Events</a></li>	
                      <li><a href="team.html">Team</a></li>							 
					 <li><a href="contact.html">Contact</a></li>
					 
						<div class="clearfix"></div>
				 </ul>
				 <!-- script-for-menu -->
		 <script>					
					$("span.menu").click(function(){
						$(".top-menu ul").slideToggle("slow" , function(){
						});
					});
		 </script>
		 <!-- script-for-menu -->	
		 </div>
	 </div>	 
</div>

<!---->	
<div class="project-sec">
	 <div class="container">
		 <h2>Our Projects</h2>
		  <div class="works">			  
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p1.jpg" class="gal">
					  <span></span><img src="images/p1.jpg" alt=""></a>
					  <div class="text1">
					   <a href="single.html">Phasellus scipiw scipitilifen. </a>
					   <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe. </p>
					  </div>
				 </div>
			  </div>
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p2.jpg" class="gal">
					  <span></span><img src="images/p2.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe. </p>
					  </div>
				  </div>
			  </div>
			  <div class="prjt-grid span66">
				 <div class="box maxheight"><a href="images/p3.jpg" class="gal">
					  <span></span><img src="images/p3.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe.</p>
					  </div>					  
				  </div>
			  </div>      
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p4.jpg" class="gal">
					  <span></span><img src="images/p4.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe.</p>
					  </div>					  
				 </div>
			  </div>
				<div class="clearfix"></div>
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p5.jpg" class="gal">
					  <span></span><img src="images/p5.jpg" alt=""></a>
					  <div class="text1">
					   <a href="single.html">Phasellus scipiw scipitilifen. </a>
					   <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe. </p>
					  </div>
				 </div>
			  </div>
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p6.jpg" class="gal">
					  <span></span><img src="images/p6.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe. </p>
					  </div>
				  </div>
			  </div>
			  <div class="prjt-grid span66">
				 <div class="box maxheight"><a href="images/p7.jpg" class="gal">
					  <span></span><img src="images/p7.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe.</p>
					  </div>					  
				  </div>
			  </div>      
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p2.jpg" class="gal">
					  <span></span><img src="images/p2.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe.</p>
					  </div>					  
				 </div>
			  </div>
				<div class="clearfix"></div>
			 <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p4.jpg" class="gal">
					  <span></span><img src="images/p4.jpg" alt=""></a>
					  <div class="text1">
					   <a href="single.html">Phasellus scipiw scipitilifen. </a>
					   <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe. </p>
					  </div>
				 </div>
			  </div>
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p2.jpg" class="gal">
					  <span></span><img src="images/p2.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe. </p>
					  </div>
				  </div>
			  </div>
			  <div class="prjt-grid span66">
				 <div class="box maxheight"><a href="images/p9.jpg" class="gal">
					  <span></span><img src="images/p9.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe.</p>
					  </div>					  
				  </div>
			  </div>      
			  <div class="prjt-grid">
				 <div class="box maxheight"><a href="images/p8.jpg" class="gal">
					  <span></span><img src="images/p8.jpg" alt=""></a>
					  <div class="text1">
					  <a href="single.html">Phasellus scipiw scipitilifen.</a>
					  <p>Kuspendisse laoreet augue iderti wer  interdum merti oremolo lectusto odio, sedorolu fringilla estero libero orciwe.</p>
					  </div>					  
				 </div>
			  </div>
				<div class="clearfix"></div>
          </div>
	 </div>
</div>
<!----->


<!---->
<div class="products">
	 <div class="container">		 
		 <div class="col-md-8 product-grids">
			 <h3>Project Construction</h3>
			 <div class="product-grid">
				 <img src="images/pc1.jpg" alt=""/>
				 <h4><a href="project.html">Posuere vivamus vel.</a></h4>
				 <p>It is a long established fact that a reader will be distracted by when looking at its layout.</p>
			 </div>
			 <div class="product-grid">
				 <img src="images/pc2.jpg" alt=""/>
				 <h4><a href="project.html">Nullam venenatis lacus.</a></h4>
				 <p>It is a long established fact that a reader will be distracted by when looking at its layout.</p>
			 </div>
			 <div class="product-grid">
				 <img src="images/pc3.jpg" alt=""/>
				 <h4><a href="project.html">Vivamus vel posuere.</a></h4>
				 <p>It is a long established fact that a reader will be distracted by when looking at its layout.</p>
			 </div>
			 <div class="clearfix"></div>
		 </div>
		 <div class="col-md-4 product-lists">
			 <h3>Our Productions</h3>
			 <ul class="list1">
				 <li><a href="#">>  &nbsp;&nbsp Lorem ipsum dolor sit amet, consectetur elit.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Vivamus vel posuere vestibulum urna.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Nullam venenatis lacus a elit fermentum.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Morbi ut sapien nec nisl pulvinar suscipit.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Integer a enim ac ex porta molestie ut at ex.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Sed in nunc non eleifend laoreet eu quis elit.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Nullam venenatis lacus fermentum.</a></li>
				 <li><a href="#">>  &nbsp;&nbsp Lorem ipsum dolor sit amet, consectetur elit.</a></li>
			 </ul>
		 </div>
		 <div class="clearfix"></div>		 
	 </div>
</div>
<!----- news-letter ----->
<!---->
<div class="footer1">
	 <div class="container">
		 <div class="ftr1-grids">
				<div class="col-md-4 ftr-grid1">
					 <div class="head-logo logo">
						 <h1><a href="index.html"><img src="images/engry.png" alt=""/>ENERGY</a></h1>
					 </div>
					 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
					 The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</p>
					 <a class="view" href="#">View ALL ABOUT US <i class="view"></i></a>				 
				</div>
				<div class="col-md-4 frt-grid2">
					 <h3>Latest <span>Tweets</span></h3>
					 <div class="ftr-grid">
						 <p>It is a long established fact that a 
						 reader will be distracted by the of a reader page when at its layout.</p>
						 <a href="#">1 Hour ago</a>
					 </div>
					 <div class="ftr-grid">
						 <p>It is a long established fact that a 
						 reader will be distracted by the of a reader page when at its layout.</p>
						 <a href="#">1 Hour ago</a>
					 </div>
				</div>
				<div class="col-md-4 ftr-grid3">
					 <h3>Subscribe to our <span>Newsletter</span></h3>
					 <form>
						 <input type="text" placeholder="Enter Email here" required/>
						 <input type="submit" value="Subscribe Now"/>
					 </form>
				</div>
				<div class="clearfix"></div>
		 </div>
	 </div>
</div>
<!---->
<div class="copywrite">
		 <div class="container">		 
				 <p>Copyright © 2015 Energy All rights reserved | Design by <a href="http://w3layouts.com" target="_blank">W3layouts</a></p>
		</div>
</div>
<!---->
<!---->
<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!----> 

</body>
</html>